<template>
	<view>
		<!-- 关注 -->
		<ul>
			<li class="community-circle" v-for="item,index in list" :key="item.id">
				<view class="top">
					<view class="top-l">
						<u--image width='100rpx' height='100rpx' :src="item.avater" shape="circle"></u--image>
						<view>
							<p>{{item.nickname}}</p>
							<p>{{item.tatil}}</p>
						</view>
						<view>

						</view>
					</view>
					<view>
						<button @click="onguanzu(index)" v-if="item.guanzu">关注</button>
						<button :plain="true" class="btn" @click="onguanzu(index)" v-else>已关注</button>
					</view>
				</view>
				<view class="bottom" @click="ontiaozhuan(index)">
					<ul>
						<li>
							<h4>{{item.title}}</h4>
							<p>{{item.text}}</p>
							<ul class="bottom-img">
								<li v-for="items,indexs in item.src" :key="indexs">
									<u--image width='335rpx' height='335rpx' :src="items.Url">
									</u--image>
								</li>
							</ul>
						</li>
						<li>
						</li>
					</ul>

				</view>
				<view class="footer">
					<view class="footer-l">
						<u-icon name="volume"></u-icon>
						<u-icon name="chat"></u-icon>
						<u-icon name="star"></u-icon>

					</view>
					<u-icon name="share"></u-icon>
				</view>
			</li>
		</ul>
		<!-- <follows :list="this.list1"></follows> -->
	</view>
</template>

<script>
	// import follows from "@/pages/follows/follows.vue"
	export default {
		name: "circles",
		data() {
			return {
				//发表数组
				list: [{
						id: 1,
						//是否显示关注
						guanzu: false,
						// 用户名
						nickname: '爱健身的煜妹',
						// 称号
						tatil: '体态达人',
						//标题
						title: '热量摄入超标的一天',
						// 内容
						text: '晚上吃的太幸福太顶了～最近怎么这么爱吃碳水 坚果！',
						// 头像
						avater: 'https://static1.keepcdn.com/avatar/2021/06/18/14/35/b2b57367f748407d5b4dce7afe6e4359a6568202.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x',
						// 分享图组
						src: [{
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/f2284feeab84a6c75b4dce7afe6e4359a6568202_1590x1303.jpg'
						}, {
							Url: "https://static1.keepcdn.com/picture/2023/02/03/22/05/4804cba2c9c1ac455b4dce7afe6e4359a6568202_1590x1304.jpg"
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/daa4a3cc7abc0be05b4dce7afe6e4359a6568202_1590x1304.jpg'
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/2ff39ef071f1c5d85b4dce7afe6e4359a6568202_1247x1662.jpg'
						}]
					},
					{
						id: 2,
						//是否显示关注
						guanzu: false,
						// 用户名
						nickname: '炎马大叔的减脂餐',
						// 称号
						tatil: '饮食达人',
						//标题
						title: '「减脂餐」要做个有担当的人',
						// 内容
						text: '今天的训练前餐是一份煎饼，鱿鱼切丝，菠菜切段，一勺煎饼粉再加一个鸡蛋，清水煮几根豆角，酱油，麻油，陈醋，辣椒面调个汁，训练的基础供能就算足够了，练后就是一碗牛肉面加上两个鸡蛋，蛋白质不足就用蛋白粉补足，增肌也好， 刷脂也罢，不要怕吃碳水和脂肪，做好简单的热量计算，只要摄入热量不超标，瘦只是一个时间问题。健身房会有一个现象，越是练的不怎么样的，就越是喜欢把哑铃扔一地，到健身房我的热身环节就是哑铃归位，今天就恰好遇到几个不懂事的小孩子，本着“ 家教不够， 社会来凑” 的原则，让我一顿怒怼，练的不好可以补救，没有规矩， 就不会有担当，比起做老好人， 我愿意做“ 社会教育通道”。 ',
						// 头像
						avater: 'https://static1.keepcdn.com/avatar/2022/07/03/23/07/0aff9b83d6bf52ac5ce15065b52fab113f83193e.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x',
						// 分享图组
						src: [{
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/d4257508eaded1465ce15065b52fab113f83193e_1579x1312.jpg'
						}, {
							Url: "https://static1.keepcdn.com/picture/2023/02/03/20/55/7263d72988d249a35ce15065b52fab113f83193e_1593x1301.jpg"
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/8209ec2e364c989e5ce15065b52fab113f83193e_1662x1247.jpg'
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/ab228574f24f43d95ce15065b52fab113f83193e_1662x1247.jpg'
						}]
					},
					{
						id: 3,
						//是否显示关注
						guanzu: false,
						// 用户名
						nickname: '爱健身的煜妹',
						// 称号
						tatil: '体态达人',
						//标题
						title: '热量摄入超标的一天',
						// 内容
						text: '晚上吃的太幸福太顶了～最近怎么这么爱吃碳水 坚果！',
						// 头像
						avater: 'https://static1.keepcdn.com/avatar/2021/06/18/14/35/b2b57367f748407d5b4dce7afe6e4359a6568202.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x',
						// 分享图组
						src: [{
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/f2284feeab84a6c75b4dce7afe6e4359a6568202_1590x1303.jpg'
						}, {
							Url: "https://static1.keepcdn.com/picture/2023/02/03/22/05/4804cba2c9c1ac455b4dce7afe6e4359a6568202_1590x1304.jpg"
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/daa4a3cc7abc0be05b4dce7afe6e4359a6568202_1590x1304.jpg'
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/22/05/2ff39ef071f1c5d85b4dce7afe6e4359a6568202_1247x1662.jpg'
						}]
					},
					{
						id: 4,
						//是否显示关注
						guanzu: false,
						// 用户名
						nickname: '炎马大叔的减脂餐',
						// 称号
						tatil: '饮食达人',
						//标题
						title: '「减脂餐」要做个有担当的人',
						// 内容
						text: '今天的训练前餐是一份煎饼，鱿鱼切丝，菠菜切段，一勺煎饼粉再加一个鸡蛋，清水煮几根豆角，酱油，麻油，陈醋，辣椒面调个汁，训练的基础供能就算足够了，练后就是一碗牛肉面加上两个鸡蛋，蛋白质不足就用蛋白粉补足，增肌也好， 刷脂也罢，不要怕吃碳水和脂肪，做好简单的热量计算，只要摄入热量不超标，瘦只是一个时间问题。健身房会有一个现象，越是练的不怎么样的，就越是喜欢把哑铃扔一地，到健身房我的热身环节就是哑铃归位，今天就恰好遇到几个不懂事的小孩子，本着“ 家教不够， 社会来凑” 的原则，让我一顿怒怼，练的不好可以补救，没有规矩， 就不会有担当，比起做老好人， 我愿意做“ 社会教育通道”。 ',
						// 头像
						avater: 'https://static1.keepcdn.com/avatar/2022/07/03/23/07/0aff9b83d6bf52ac5ce15065b52fab113f83193e.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x',
						// 分享图组
						src: [{
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/d4257508eaded1465ce15065b52fab113f83193e_1579x1312.jpg'
						}, {
							Url: "https://static1.keepcdn.com/picture/2023/02/03/20/55/7263d72988d249a35ce15065b52fab113f83193e_1593x1301.jpg"
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/8209ec2e364c989e5ce15065b52fab113f83193e_1662x1247.jpg'
						}, {
							Url: 'https://static1.keepcdn.com/picture/2023/02/03/20/55/ab228574f24f43d95ce15065b52fab113f83193e_1662x1247.jpg'
						}]
					}
				],
				list1: []
			};
		},
		// components: {
		// 	follows
		// },
		methods: {
			// 点击切换关注
			onguanzu(index) {

				console.log(this.list[index].guanzu);
				this.list[index].guanzu = !this.list[index].guanzu
			},
			// 进入对应数据界面
			ontiaozhuan(index) {
				console.log(index);
				this.list1 = this.list[index]
				uni.setStorageSync("userInfo", JSON.stringify(this.list1))
				console.log(this.list1);
				uni.navigateTo({
					url: "/pages/follows/follows"
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.community-circle {
		margin-bottom: 70px;
		// border: 1px solid red;
	}

	.top {
		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10px;
		margin-top: 20px;

		.top-l {
			width: 200px;
			display: flex;
			justify-content: space-around;
		}

		button {
			width: 70px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			border-radius: 15px;
			color: white;
			background-color: #24c789;
		}

		.btn {
			background-color: white;
			border: 1px solid #24c789;
			color: #24c789;
		}
	}

	.bottom {
		ul {
			list-style: none;

			li {
				h4 {
					width: 95%;
					margin: 10px 10px 10px 10px;
				}

				p {
					text-indent: 2em;
					width: 95%;
					margin: 10px 10px 10px 10px;
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
					-webkit-line-clamp: 4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.bottom-img {
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;

					li {
						margin: 10px 10px 10px 10px;
					}

				}
			}
		}


	}

	.footer {
		margin: 0px 10px 0px 10px;
		display: flex;
		justify-content: space-between;

		.footer-l {
			width: 180px;
			display: flex;
			justify-content: space-around;

		}
	}
</style>
